<template>
    <a-drawer :title="title" :width="420" @close="handleCancel(false)" :visible="visible" :maskClosable="false"
              :bodyStyle="{ paddingBottom: '60px' }">
        <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
            <!-- 登录账号 -->
            <a-form-model-item label="场地代码" prop="code" ref="code">
                <a-input placeholder="请设置场地代码"
                         :maxLength="20"
                         v-model="form.code" :disabled="isUpdate"/>
            </a-form-model-item>

            <a-form-model-item label="场地名称" prop="name" ref="name">
                <a-input
                        :maxLength="20"
                        placeholder="请设置场地名称" v-model="form.name"/>
            </a-form-model-item>


            <a-form-model-item label="计费规则组" prop="feeGroupCode" ref="feeGroupCode">
                <a-select placeholder="请选择场地应用的计费规则" allowClear showSearch v-model="form.feeGroupCode"

                >
                    <a-select-option v-for="(item, index) in FeeRuleGroupOPT" :key="index" :value="item.value">
                        {{item.label }}
                    </a-select-option>
                </a-select>
            </a-form-model-item>

            <a-form-model-item label="所属街道" prop="streetCode" ref="streetCode">
                <a-cascader
                        placeholder="请设置场地所属街道"
                        :options="AreaStreetTreeOPT"
                        :default-value="AreaStreetCascader"
                        :show-search="{ filter }"
                        @change="onChangeCascader"

                />
            </a-form-model-item>

            <a-form-model-item label="场地坐标" prop="lng" ref="lng">
                <a-row :gutter="8">
                    <a-col :span="10">
                        <a-input disabled placeholder="经度" v-model="form.lng"/>
                    </a-col>
                    <a-col :span="10">
                        <a-input disabled placeholder="纬度" v-model="form.lat"/>
                    </a-col>
                    <a-col :span="4">
                        <a-button icon="environment"   @click="AmapSectorShow=true"    >
                        </a-button>


                    </a-col>
                </a-row>

            </a-form-model-item>


            <a-form-model-item label="详细地址" prop="address" ref="address">
                <a-textarea  placeholder="请设置场地名称"

                             :rows="4"
                             v-model="form.address"/>
            </a-form-model-item>


        </a-form-model>


        <AmapSector v-if="AmapSectorShow" @closeModal="closeAmapSector" :lnglat="{lng:form.lng,lat:form.lat}"/>
        <!-- Modal 页脚 -->
        <footer class="drawer-footer">
            <a-button type="primary" :loading="loading" @click="onSubmit">保存</a-button>
        </footer>
    </a-drawer>
</template>
<script>
    import {placeAdd, placeUpdate} from '../public/http';
    import {FeeRuleGroupDict, AreaStreetTreeDict} from '../public/internal'

    export default {
        props: ['editRecord'],
        components:{
            AmapSector: () => import('../../../common/AmapSector'),
        },
        data() {
            return {
                isUpdate: false, //是否是更新模式
                loading: false, //按钮Loading
                AmapSectorShow: false,
                title: '新增场地',
                visible: true, //modal 显示状态
                labelCol: {
                    xs: {
                        span: 24
                    },
                    sm: {
                        span: 7
                    }
                },
                wrapperCol: {
                    xs: {
                        span: 24
                    },
                    sm: {
                        span: 16
                    }
                },
                form: {
                    code: null,
                    name: null,
                    feeGroupCode: undefined,
                    areaCode: null,
                    streetCode: null,
                    lng:null,
                    lat:null,
                    address:null,


                },
                rules: {
                    code: [
                        {
                            required: true,
                            message: '请设置场地代码',
                            trigger: 'blur'
                        },
                        {
                            max: 20,
                            message: '场地代码请设置在20个字符以内',
                            trigger: 'blur'
                        },
                        {
                            pattern: /^[a-zA-Z0-9]+$/,
                            message: '场地代码只允许填写数字或者字母',
                            trigger: 'blur'
                        }
                    ],
                    name: [
                        {
                            required: true,
                            message: '请设置场地名称',
                            trigger: 'blur'
                        },
                        {
                            max: 20,
                            message: '场地名称请设置为20个字符以内',
                            trigger: 'blur'
                        }
                    ],
                    feeGroupCode: {
                        required: true,
                        message: '请设置场地应用的计费规则组方案',
                        trigger: 'blur'

                    },



                    streetCode: {
                        required: true,
                        message: '请设置长度所属街道',
                        trigger: 'blur'

                    },
                    lng:{
                        required: true,
                        message: '请在地图上标注场地所在位置',
                        trigger: 'blur'

                    },
                    address:[{
                        required: true,
                        message: '请设置场地具体位置',
                        trigger: 'blur'

                    },
                        {
                            max: 300,
                            message: '场地位置不能超过300个字符',
                            trigger: 'blur'
                        },

                    ]




                },
                AreaStreetCascader: undefined,  //区域解答默认值
                FeeRuleGroupOPT: [],
                AreaStreetTreeOPT: [],

            }
        },
        methods: {
            filter(inputValue, path) {
                return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
            },

            //表单提交事件
            onSubmit() {
                this.$refs.ruleForm.validate(valid => {
                    //验证成功后进行数据提交
                    if (valid) {
                        this.loading = true;
                        if (this.isUpdate) {
                            placeUpdate(this.form.id, this.form).then(res => {
                                this.$exMod.ajaxMessage(res);
                                if (res.code === 0) {
                                    this.handleCancel(true);
                                }
                            });
                        } else {
                            placeAdd(this.form).then(res => {
                                this.$exMod.ajaxMessage(res);
                                if (res.code === 0) {
                                    this.handleCancel(true);
                                }
                            });
                        }
                    }
                });
            },


            onChangeCascader(e) {
                //没有选择数据
                if (e.length === 0) {
                    this.form.areaCode = null;
                    this.form.streetCode = null;
                    this.AreaStreetCascader = undefined;
                }
                //只选择了区域级
                if (e.length === 1) {
                    this.form.areaCode = e[0];
                    this.form.streetCode = null;
                    this.AreaStreetCascader = e;
                }
                //选择了区域街道
                if (e.length === 2) {
                    this.form.areaCode = e[0];
                    this.form.streetCode = e[1];
                    this.AreaStreetCascader = e;
                }
                //触发自动验证
                this.$refs.streetCode.onFieldBlur();




            },


            //位置选择回调
            closeAmapSector(e) {

                this.AmapSectorShow = false;
                if (e.location) {
                    let {lng, lat, address} = e.location;
                    let ob = {lng, lat, address};
                    //合并对象
                    this.form = Object.assign(this.form, ob)
                }
                //关闭地图后自动验证地址
                this.$refs.lng.onFieldBlur();
                this.$refs.address.onFieldBlur();

            },
            //关闭弹窗 刷新
            handleCancel(render = false) {
                this.visible = false;
                this.$emit('closeFun', {render: render});
            },


            //表单初始化
            fromVal() {
                let obj = {...this.editRecord};
                if (obj.id) {
                    this.form = obj;
                    this.isUpdate = true;
                    this.title = '编辑场地';
                }
            },
            //数据初始化
            async init() {
                //计费规则组
                await FeeRuleGroupDict().then(res => this.FeeRuleGroupOPT = res);
                //街道树
                await AreaStreetTreeDict().then(res => this.AreaStreetTreeOPT = res);
                this.fromVal();
            }
        },
        created() {
            this.init();
        }
    };
</script>
